import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress';
import Prism from 'prismjs';
import VueMarkdownEditor from '@kangc/v-md-editor';
import { regionDataPlus } from 'element-china-area-data';
import VueQrcode from '@chenfengyuan/vue-qrcode';
import { showMsg } from '@/util/toast';
import QfContainer from '@/components/Container.vue';
import companyPicker from '@/components/companyPicker.vue';
import router from './router';
import store from './store';
import 'element-plus/dist/index.css';
import App from './App.vue'; // 全局注册一个组件

import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

const app = createApp(App); // App组件就是根实例组件
app.component('QfPage', QfContainer);
app.component('companyPicker', companyPicker);

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

app.config.globalProperties.$message = showMsg;
// 全局混入
app.mixin({
  methods: {
    formatArea(str: string) {
      const arr = str.split(',');
      // 省一级
      const province = regionDataPlus.find((item: any) => item.value === arr[0]);
      // 市一级
      const city = province.children.find((item: any) => item.value === arr[1]);
      // 区一级
      const zone = city.children.find((item: any) => item.value === arr[2]);
      return `${province.label}/${city.label}/${zone.label}`;
    },
  },
});

app.use(store);
app.use(router);
app.use(ElementPlus); // 使用 ElementPlus
app.use(VueMarkdownEditor); // 使用 MdEditor
app.component(VueQrcode.name, VueQrcode);

app.mount('#app');
